<template>
  <div class="dls-salw-reward-order">
    <recommend-header :headerData="headerData"
                      type='dhs'></recommend-header>
    <main>
      <div class="dhs-nav">
        <div class="aGroup clearfix">
          <scroll class="wrapper wrapper-srcoll"
                  ref="wrapper"
                  :startX="0"
                  :click="true"
                  :scrollX="true"
                  :scrollY="false"
                  :eventPassthrough="'vertical'">
            <div class="content">
              <van-button class="span" data-id="1"  @click="selectItem(1)" :color="[type == 1 ? '#F30C23':'#999999']" plain hairline round type="primary">
                <i>全部</i>
                <em>{{arr['1']}}</em>
              </van-button>
              <van-button class="span" data-id="2"  @click="selectItem(2)" :color="[type == 2 ? '#F30C23':'#999999']" plain hairline round type="primary">
                <i>未付款</i>
                <em>{{arr['2']}}</em>
              </van-button>
              <van-button class="span" data-id="3"  @click="selectItem(3)" :color="[type == 3 ? '#F30C23':'#999999']" plain hairline round type="primary">
                <i>已付款</i>
                <em>{{arr['3']}}</em>
              </van-button>
              <van-button class="span" data-id="4"  @click="selectItem(4)" :color="[type == 4 ? '#F30C23':'#999999']" plain hairline round type="primary">
                <i>已确认收货</i>
                <em>{{arr['4']}}</em>
              </van-button>
            </div>
          </scroll>
        </div>
      </div>
      <div class="user-list"
           v-show="list.length">
        <van-list v-model="loading"
                  :finished="finished"
                  :error.sync="error"
                  error-text="请求失败，点击重新加载"
                  finished-text=""
                  @load="onLoad">
          <div v-for="(item, index) in list"
               :key="index"
               class="item">
            <div class="dhs-virtual-icon"
                 v-if="item.is_dhs_virtual == 1"></div>
            <div class="fxordertit clearfix">
              <span class="fl">订单日期：{{item.end_time}}&nbsp;</span>
              <span class="fl">付款日期：{{item.pay_time}}</span>
              <span class="fr"
                    :class="[item.status == 3 ? 'ready' : '']">{{item.status_name}}</span>
            </div>
            <div class="fxorderlst clearfix">
              <div class="dxPic fl">
                <img :src="item.avthor"
                    v-if="item.avthor"
                    class="user"
                    width="100%" />
                <img :src="defaultPhotoImg"
                    v-else
                    class="user"
                    width="100%" />
              </div>
              <div class="fxorderinfo fl" @click="onDetails(item)">
                <div v-if="is_Lazy_cat_dz" style="width: 100%;">
                  <p>订单编号：</p>
                  <p>{{item. order_no}}</p>
                </div>
                <div>
                  <p>姓名：</p>
                  <p>{{item.receiver_name}}</p>
                </div>
                <div>
                  <p>金额：</p>
                  <p>{{mSymbol.name}}{{item.money}}</p>
                </div>
                <div v-if="!ltsn_dz">
                  <p>{{item.commission_name}}：</p>
                  <p>{{mSymbol.name}}{{item.commission}}</p>
                </div>
                <!-- <div>
                  <p>级别：</p>
                  <p>{{item.level_name}}</p>
                </div> -->
                <div>
                  <p>状态：</p>
                  <p>{{item.order_status}}</p>
                </div>
                <p class="check_detail"
                  @click="Jump(item.order_id)">
                  <van-button  class="send-btn" color="#F30C23" plain hairline round type="primary">查看订单商品明细</van-button>
                  <!-- <svg-icon icon-class="icon_right"
                            class="all-class-icon"></svg-icon> -->
                </p>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div class="no-data" v-show="!list.length && finished">
        <no-data :noData="noData"></no-data>
      </div>
    </main>
  </div>
</template>

<script>
import noData from '@/components/noData/index'
import recommendHeader from '@/views/user/components/recommendHeader'
import Scroll from '@/components/scroll/index'
import { getDhsSaleRewardOrder, getDhsRecommendHeader } from '@/api/user/dhs/dhsApi'
import { mapGetters } from 'vuex'

import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/user/default_photo_img.jpg',
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_order_data.png',
        text: '暂无销售奖订单',
        marginTop: '5em'
      },
      headerData: {
        settle_commission: '',
        all_order_amount: '',
        dls_num: '',
        order_total: '',
        type: 1
      },
      type: 1,
      p: 2,
      arr: {
        1: '',
        2: '',
        3: '',
        4: ''
      },
      list: [],
      error: false,
      loading: false,
      finished: false,
      // 莱特妮丝定制
      ltsn_dz: false,
      is_Lazy_cat_dz: 0 // 懒猫定制
    }
  },
  created() {
    this.getHeaderFn()
    this.init()
    // 莱特妮丝定制
    const shop = this.$route.query.sid
    const ltsn_dz = this.$_shop('$_ltsn_dz', shop)
    this.ltsn_dz = ltsn_dz
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  methods: {
    getHeaderFn() {
      getDhsRecommendHeader({}).then(res => {
        if (res.status == 1) {
          this.headerData.settle_commission = res.data.settle_commission
          this.headerData.all_order_amount = res.data.all_order_amount
          this.headerData.dhs_num = res.data.dhs_num
          this.headerData.order_total = res.data.reward_total
        } else {
          this.$Error(res.msg)
        }
      }).catch(() => {
        this.finished = true
      })
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      getDhsSaleRewardOrder().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          // this.headerData.settle_commission = res.data.settle_commission
          // this.headerData.all_order_amount = res.data.all_order_amount
          // this.headerData.dhs_num = res.data.dhs_num
          // this.headerData.order_total = res.data.reward_total
          this.arr = res.data.arr
          this.list = res.data.order_list
          this.is_Lazy_cat_dz = res.data.is_Lazy_cat_dz
          if (this.list.length < 10) {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    Jump(order_id) {
      const path = 'dhsSaleRewardOrderDetail'
      if (this.is_Lazy_cat_dz) {
        this.$JumpPath(this, path, { order_id, is_Lazy_cat_dz: 1 })
      } else {
        this.$JumpPath(this, path, { order_id })
      }
    },
    onDetails(item) {
      if (this.is_Lazy_cat_dz) {
        this.Jump(item.order_id)
      }
    },
    // JumpUrl(url) {
    //   window.location.href = url
    // },
    // 切换类型
    selectItem(type) {
      if (this.type == type) return
      this.type = type
      this.p = 2
      this.finished = false
      this.error = false
      this.loading = false
      const data = {
        type: type
      }
      this.$loadingWrap.show()
      getDhsSaleRewardOrder(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          // 列表
          this.list = res.data.order_list
          if (this.list.length < 10) {
            this.finished = true
          } else {
            this.finished = false
          }
        } else {
          this.$Error(res.mag)
        }
      })
    },
    // 加载更多
    onLoad() {
      const data = {
        p: this.p,
        type: this.type
      }
      getDhsSaleRewardOrder(data)
        .then(res => {
          this.loading = false
          if (res.data) {
            this.list = this.list.concat(res.data.order_list)
            this.p++
          } else {
            this.finished = true
          }
        })
        .catch(() => {
          this.error = true
        })
    }
  },
  components: {
    recommendHeader,
    noData,
    Scroll
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>

<style lang="scss">
@import "src/styles/variables";
@import "src/styles/user/Group/index";
@import "src/styles/user/orderList/index";
.dhs-nav{
  border-top: 1px solid #ededed;
  padding: 10px 30px;
  background: #fff;
  .wrapper-srcoll{
    overflow-x: scroll;
  }
  scroll {
    -webkit-overflow-scrolling: touch;
  }
}
.fxordertit {
  height: auto !important;
}
</style>
